{include file="common/header"}
{include file="common/app"}
<script type="text/javascript" src="/themes/onekeyadmin/static/js/cropper.min.js"></script>
<div id="app" v-cloak>
    <div class="el-warp">
        <div class="el-user">
            {include file="user/site"}
            <div class="content">
                <div class="el-user-header">
                    <div class="item active">个人资料</div>
                </div>
                <el-form ref="userInfo" label-width="160px" :model="userInfo">
                    <el-form-item prop="cover">
                        <el-image 
                            :src="userInfo.cover" 
                            style="height: 120px;width: 120px" 
                            @click="coverDialog = true">
                        </el-image>
                    </el-form-item>
                    <el-form-item label="生日：" prop="birthday">
                        <el-date-picker
                            v-model="userInfo.birthday"
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="性别：" prop="sex">
                        <el-radio v-model="userInfo.sex" :label="0">男</el-radio>
                        <el-radio v-model="userInfo.sex" :label="1">女</el-radio>
                    </el-form-item>
                    <el-form-item label="昵称：" prop="nickname">
                        <el-input v-model="userInfo.nickname" maxlength="12" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="签名：" prop="describe">
                        <el-input v-model="userInfo.describe" maxlength="255" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="允许TA人访问主页：" prop="hide">
                        <el-switch
                            v-model="userInfo.hide"
                            :active-value="1"
                            :inactive-value="0">
                        </el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="update()" :loading="loading">
                            更新
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
    <el-dialog
        title="更换头像"
        :visible.sync="coverDialog"
        width="440px">
        <label for="uploads" icon="el-icon-upload" size="small" style="padding: 9px 15px;border: 1px solid #DCDFE6">上传本地照片</label>
        <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/jpg" @change="uploadImg($event, 1)">
        <div style="margin-bottom: 20px;"></div>
        <vue-cropper
            style="width: 400px;height: 400px;"
            ref="cropper" 
            mode="cover" 
            :img="option.img" 
            :output-size="option.size" 
            :output-type="option.outputType" 
            :info="true" 
            :full="option.full" 
            :fixed="fixed" 
            :fixed-number="fixedNumber"
            :can-move="option.canMove" 
            :can-move-box="option.canMoveBox" 
            :fixed-box="option.fixedBox" 
            :original="option.original"
            :auto-crop="option.autoCrop" 
            :auto-crop-width="option.autoCropWidth" 
            :auto-crop-height="option.autoCropHeight" 
            :center-box="option.centerBox"
            :high="option.high"  
            :max-img-size="option.max" 
            @real-time="realTime">
        </vue-cropper>
        <div style="margin: 20px 0">
            <el-button @click="changeScale(1)" icon="el-icon-plus" size="small"></el-button>
            <el-button @click="changeScale(-1)" icon="el-icon-minus" size="small"></el-button>
            <el-button @click="rotateLeft" icon="el-icon-refresh-left" size="small"></el-button>
            <el-button @click="rotateRight" icon="el-icon-refresh-right" size="small"></el-button>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="updateCover()" size="small">确 定</el-button>
            <el-button @click="coverDialog = false" size="small">取 消</el-button>
        </span>
    </el-dialog>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                userInfo: userInfo,
                loading: false,
                rules: {
                    nickname: [
                        { required: true, message: '请输入昵称', trigger: 'blur' },
                    ],
                    describe: [
                        { required: true, message: '请输入自我介绍', trigger: 'blur' },
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'blur' },
                    ],
                    birthday: [
                        { required: true, message: '请输入生日', trigger: 'blur' },
                    ],
                },
                // 更换头像
                previews: {},
                coverDialog: false,
                option: {
                    img: "",
                    size: 1,
                    full: true, // 是否输出原图比例的截图
                    outputType: 'png', // 输出格式png,jpg,webp
                    canMove: true, // 拖动图片
                    fixedBox: true, // 截图框固定大小
                    original: false, // 上传图片是否显示原始宽高
                    canMoveBox: true, // 拖动截图框
                    autoCrop: true, // 是否自动生成截图框
                    // 只有自动生成截图框后以下配置才能开启
                    autoCropWidth: 200,
                    autoCropHeight: 200,
                    centerBox: true,  // 截图框是否限制在图片里
                    high: true, // 是否根据dpr生成适合屏幕的高清图片
                    max: 400
                },
                fixed: true,
                fixedNumber: [1, 1]
            }
        },
        created() {
            if (JSON.stringify(userInfo) == '{}') {
                location.href = "{:index_url('login/index')}"
            }
        },
        methods: {
            /**
             * 提交
             */
            update() {
                let self = this;
                self.$refs.userInfo.validate((valid) => {
                    if (valid) {
                        self.loading = true;
                        post('api/user/set', self.userInfo, function(res){
                            self.loading = false;
                            self.$message({ showClose: true, message: res.message, type: res.status });
                        });
                    } else {
                        return false;
                    }
                });
            },
            /**
             * 更换头像
             */
            changeScale(num) {
                num = num || 1
                this.$refs.cropper.changeScale(num)
            },
            rotateLeft() {
                this.$refs.cropper.rotateLeft()
            },
            rotateRight() {
                this.$refs.cropper.rotateRight()
            },
            realTime(data) {
                this.previews = data;
            },
            updateCover() {
                let self = this;
                self.$refs.cropper.getCropData((data) => {
                    let arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                    while(n--){
                        u8arr[n] = bstr.charCodeAt(n);
                    }
                    let file = new File([u8arr], 'header.' + self.option.outputType, {type:mime});
                    let formData = new FormData();
                    formData.append('file', file);
                    $.ajax({
                        url: "{:index_url('user/upload')}",
                        type: 'post',
                        data: formData,
                        async:false,
                        cache:false,
                        contentType:false,
                        processData:false,
                        success:function(res) {
                            if (res.status === 'login') location.reload();
                            if (res.status === 'success') {
                                self.user = Object.assign({}, self.user, {cover: res.data});
                                self.update();
                            } else {
                                self.$message({showClose: true, message: res.message, type: res.status});
                            }
                            self.coverDialog = false;
                        },
                        error:function(res) {
                            self.$message({showClose: true, message: '系统错误', type: 'error'});
                            self.coverDialog = false;
                        }
                    })
                })
            },
            uploadImg(e, num) {
                var file = e.target.files[0]
                if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
                    self.$message({ showClose: true, message: '只允许jpg、jpeg、png格式', type: 'errpr'});
                    return false
                }
                var reader = new FileReader()
                reader.onload = (e) => {
                    let data;
                    if (typeof e.target.result === 'object') {
                        data = window.URL.createObjectURL(new Blob([e.target.result]));
                    } else {
                        data = e.target.result;
                    }
                    if (num === 1) {
                        this.option.img = data;
                    } else if (num === 2) {
                        this.example2.img = data;
                    }
                }
                reader.readAsArrayBuffer(file);
            },
        }
    });
</script>
</body>
</html>